<template>
  <div>
    <el-card>
      <!-- <div class="information">
        <div class="information-top">
          <div class="information-text">实验：实验名称</div>
          <div class="information-text">实验类型：{{topText.experimentTypeName}}</div>
          <div class="information-text">实验室：{{topText.name}}</div>
        </div>
        <div>
          <div class="information-text">日期：{{topText.day}}</div>
          <div class="information-text">时间：{{topText.timeSlotName}}：{{topText.startTime}}--{{topText.endTime}}</div>
        </div>
      </div> -->
      <div class="form">
        <el-steps :active="active" finish-status="success" simple style="margin-bottom: 20px">
          <el-step title="选择实验室" icon="el-icon-edit"></el-step>
          
          <el-step title="填写申请信息" icon="el-icon-upload">
          </el-step>
          <el-step title="当前状态">
          </el-step>
        </el-steps>
        <el-form ref="form" label-width="100px">
          <template v-if="active == 0">
            <el-form-item label="预约使用时间">
              <el-date-picker
                v-model="formData.d"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
              <el-time-picker
                v-model="formData.startTime"
                :picker-options="{
                  selectableRange: '05:30:00 - 23:30:00'
                }"
                placeholder="开始时间">
              </el-time-picker>
              <el-time-picker
                v-model="formData.endTime"
                :picker-options="{
                  selectableRange: '05:30:00 - 23:30:00'
                }"
                placeholder="结束时间">
              </el-time-picker>
            </el-form-item>
            <el-form-item label="实验室类型">
              <el-select v-model="formData.experiment" placeholder="请选择--">
                <!-- <el-option v-for="item in optionsList.experiment" :key="item.id" :label="item.name" :value="item.id"></el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item label="实验类型">
              <el-select v-model="formData.experiment" placeholder="请选择--">
                <!-- <el-option v-for="item in optionsList.experiment" :key="item.id" :label="item.name" :value="item.id"></el-option> -->
              </el-select>
            </el-form-item>
            <hr style="border: 1px solid #fefefe" />
            <el-form-item label="选择实验室">
              <el-table
                :data="labList"
                style="width: 100%">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  type="index"
                  width="50">
                </el-table-column>
                <el-table-column label="实验室信息">
                  <template slot-scope="scope">
                    <p>名称：<el-button type="text">{{ scope.row.name }}</el-button></p>
                    <p>地址：试试</p>
                  </template>
                </el-table-column>
                <el-table-column label="预约情况">
                  <template slot-scope="scope">
                    已有5人预约2，总共可容纳10人
                    <el-button type="text">{{ scope.row.labName }}</el-button>
                  </template>
                </el-table-column>
                <!-- <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="text">预约</el-button>
                  </template>
                </el-table-column> -->
              </el-table>
            </el-form-item>
            <div class="form-button">
              <el-button style="margin-top: 12px;" @click="next" type="primary">下一步</el-button>
            </div>
          </template>
          
          <template v-if="active == 1">
            <hr style="border: 1px solid #fefefe" />
            
            <el-form-item label="选择实验">
              <el-table
                :data="experiList"
                style="width: 100%">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  type="index"
                  width="50">
                </el-table-column>
                <el-table-column label="题目">
                  <template slot-scope="scope">
                    <el-button type="text">{{ scope.row.name }}</el-button>
                  </template>
                </el-table-column>
                <el-table-column label="实验目的">
                  <template slot-scope="scope">
                    给出本次实验要求掌握的知识点、技能等
                  </template>
                </el-table-column>
                <el-table-column label="实验环境">
                  <template slot-scope="scope">
                    给出本次实验要求掌握的知识点、技能等
                  </template>
                </el-table-column>
                <el-table-column label="实验准备">
                  <template slot-scope="scope">
                    给出本次实验要求掌握的知识点、技能等
                  </template>
                </el-table-column>
                <el-table-column label="实验过程">
                  <template slot-scope="scope">
                    给出本次实验要求掌握的知识点、技能等
                  </template>
                </el-table-column>
                
              </el-table>
            </el-form-item>
            <!-- <el-form-item label="选择院系" prop="modelName">
              <el-input v-model="formData.modelName"></el-input>
            </el-form-item> -->
            <el-form-item label="指导老师">
              <el-col :span="5"><el-input placeholder="选择院系" v-model="formData.modelName"></el-input></el-col>
              <el-col :span="11">
                <el-select v-model="formData.experiment" placeholder="请选择--">
                  <!-- <el-option v-for="item in optionsList.experiment" :key="item.id" :label="item.name" :value="item.id"></el-option> -->
                </el-select>
              </el-col>
            </el-form-item>

            <el-form-item label="用途">
              <el-input
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 6}"
                placeholder="请输入用途">
              </el-input>
            </el-form-item>
            <el-form-item>
              <div class="form-button">
                <el-button style="margin-top: 12px;" @click="last">上一步</el-button>
                <el-button type="primary" @click="next">提交预约</el-button>
              </div>
            </el-form-item>
          </template>
          <template v-if="active == 2">
            <div style="text-align: center; color: green; line-height: 120px;">
              预约申请已提交
            </div>
            <div class="form-button">
              <!-- <el-button style="margin-top: 12px;" @click="last">上一步</el-button> -->
              <el-button type="primary" @click="finish">完成</el-button>
            </div>
          </template>
        </el-form>
        <!-- <el-button style="margin-top: 12px;" @click="next" type="primary">下一步</el-button> -->
      </div>

      
    </el-card>
  </div>
</template>

<script>
// import request from '@/utils/request'
export default {
  data() {
    return {
      active: 0,
      formData: {},
      loading: true,
      topText: {},
      form: {
        experiment: ''
      },
      optionsList: {
        experiment: []
      },
      selectedOptions: [],
      selectedOptions2: [],
      labList: [{
        date: '2016-05-02',
        name: '物联网实验室',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      experiList: [
        {
          name: '第一节：linux操作系统的安装'
        }
      ]
    }
  },
  created() {

  },
  methods: {
    next() {
      if (this.active++ > 2) this.active = 0
    },
    last() {
      if (this.active-- < 1) this.active = 0
    },
    finish() {
      this.$router.push('/studentAppoint/appointments')
    }
  }
}
</script>

<style scoped>
.information {
  width: 100%;
  height: 100px;
  padding-top: 20px;
  padding-left: 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
  background-color: #f7f7f7;
}
.information-top {
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.information-text {
  float: left;
  width: 33%;
}
.form {
  margin-top: 20px;
}
.form-button {
  float: right;
  margin-bottom: 30px;
}
</style>
